<template>
  <div>
    <el-drawer :title="title" :visible.sync="showConfig"
               :modal-append-to-body="false"
               :close-on-press-escape="false"
               :size="'600px'"
               @close="cancel()"
               direction="rtl" :modal="false" destroy-on-close custom-class="demo-drawer">
      <div class="demo-drawer__content">
        <div class="rule-box">
          <div class="daytime-header mb20">
            <p>将在出勤统计中记为</p>
            <p class="mt10" v-if="unit==3">共请假{{time || 0}}小时</p>
            <p class="mt10" v-else>共请假{{time || 0}}天</p>
          </div>
          <el-timeline style="padding: 0" class="timeline-body">
            <el-timeline-item
              v-for="(activity, index) in leaveDay"
              :type="!activity.isholiday?'primary':''"
              :key="index">
              <div class="timeline-box">
                <p class="timeline-time" :class="{'resetDay': activity.isholiday}" v-if="unit==3">{{ activity.number?`${activity.number}小时`:'0小时(休息)' }}</p>
                <p class="timeline-time" :class="{'resetDay': activity.isholiday}" v-else>{{ activity.number?`${activity.number}天`:'0天(休息)' }}</p>
                <p class="timeline-small">{{ activity.day }} 周{{ weekName[activity.week] }}</p>
                <!--                此处上班时间需要注意，间断性判断-->
                <div class="timeline-box" v-if="!activity.isholiday">
                  <p class="work-line-time" v-if="unit==3">
                    请假 {{`${activity.leavetime[0].startTime}-${activity.leavetime[0].endTime}`}}
                  </p>
                  <p class="work-line-time" v-else>
                    {{activity.number==1?'全天':'半天'}}
                  </p>
                  <p class="work-line" v-if="!activity.isholiday"></p>
                  <p class="work-time" v-if="!activity.isholiday">
                    <span>{{activity.woorData.comeTime1}}</span>
                    <span>{{activity.woorData.outTime1}}</span>
                  </p>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>

export default {
  name: "rule",
  props: ['visible', 'leaveDay', 'time', 'unit'],
  components: {},
  data() {
    return {
      showConfig: false,
      weekName: ['日', '一', '二', '三', '四', '五', '六'],
      title: '计算明细',
    }
  },
  watch: {
    visible() {
      this.showConfig = this.visible
    }
  },
  methods: {
    submitline() {
    },
    cancel() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>
.rule-box {
  padding: 10px 20px;
}

.daytime-header {
  background: #5aadf8;
  padding: 20px 20px;
  border-radius: 5px;
  color: #fff;
}

.daytime-header p {
  padding: 0;
  margin: 0;
  font-size: 12px;
}

.daytime-header p:last-child {
  font-size: 18px;
  font-weight: 500;
}

.timeline-body {

}

.timeline-box p {
  margin: 0;
}

.timeline-box .timeline-time {
  font-size: 16px;
  color: #2a99ff;
}

.timeline-box .resetDay {
  color: #999 !important;
}

.timeline-box .timeline-small {
  font-size: 13px;
  color: #999;
  margin-bottom: 10px;
}

.timeline-box .work-line-time {
  background: #eef6fe;
  text-align: center;
  padding: 2px 0;
  font-size: 12px;
  color: #2a99ff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.timeline-box .work-line {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #f6daa6;
}

.timeline-box .work-time {
  display: flex;
  justify-content: space-between;
  color: #999;
}
</style>
